/**
 * 关联提醒联系人

 */

import React, { useState, useEffect } from 'react';
import CommonModal from '@/components/CommonModal';
import CommonTable from '@/components/CommonTable';
import CommonLoading from '@/components/CommonLoading';
import AddUserModal from './AddUserModal';
import { Popconfirm, Button, message } from 'antd';
import { queryPersonList, deletePerson } from '../service';
import styles from './index.module.less';

const RelateRemindUser = ({ visible, recordData, handleCancel }) => {
  const [loading, setLoading] = useState(false);
  const [addVisible, setAddVisible] = useState(false); //添加联系人弹窗
  const [userList, setUserList] = useState([]); //联系人列表

  useEffect(() => {
    if (visible) {
      getPersonList();
    }
  }, [visible]);

  //获取关联联系人的数据
  const getPersonList = async () => {
    setLoading(true);
    const { success, data = [] } = await queryPersonList({
      noticeId: recordData?.id,
    });
    if (success) {
      setUserList(data);
    }
    setLoading(false);
  };

  //关闭弹框，清空数据
  const onCancel = () => {
    // form.resetFields();
    handleCancel();
  };

  //删除联系人
  const handleDelete = async (record) => {
    setLoading(true);
    const { success } = await deletePerson({
      noticePersonId: record.id,
    });
    if (success) {
      message.success('删除成功');
      getPersonList();
    }
    setLoading(false);
  };

  const columns = [
    {
      title: '序号',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (t, r, i) => i + 1,
    },
    {
      title: '账号',
      dataIndex: 'account',
      key: 'account',
      width: 100,
    },
    {
      title: '联系人',
      dataIndex: 'name',
      key: 'name',
      width: 100,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      width: 120,
    },
    {
      title: '操作',
      key: 'opera',
      width: 100,
      dataIndex: 'isDefault',
      render: (text, record) => (
        <span className="opera-span-common">
          <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => handleDelete(record)}
            okText="确定"
            cancelText="取消"
          >
            <span>删除</span>
          </Popconfirm>
        </span>
      ),
    },
  ];

  //添加联系人
  const AddUserModalProps = {
    visible: addVisible,
    item: recordData,
    handleCancel() {
      setAddVisible(false);
    },
    handleOk() {
      setAddVisible(false);
      getPersonList();
    },
  };

  //列表props
  const CommonTableProps = {
    data: userList,
    columns,
    key: 'id',
    scroll: { y: 300 },
  };

  return (
    <CommonModal
      title="新增用户"
      visible={visible}
      onCancel={onCancel}
      width="656px"
      footer={[
        <Button key="back" onClick={onCancel}>
          关闭
        </Button>,
      ]}
    >
      <div style={{ overflow: 'hidden' }}>
        <p className={styles.addUserContent}>
          <span
            className={styles.addUserButton}
            onClick={() => {
              setAddVisible(true);
            }}
          >
            添加联系人
          </span>
        </p>
        <CommonTable {...CommonTableProps} />
      </div>
      {
        addVisible &&  <AddUserModal {...AddUserModalProps} />
      }
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default RelateRemindUser;
